<template>
	<view>
		<u-popup
			v-model="show"
			mode="bottom"  
			@close="close" 
			@open="open"
			closeable>
			<view>
				<view class="bg-white">
					<view class="text-center text-xl text-black">请选择服务时间</view>
					<view>
						 <view class="tab">
						 	<u-tabs 
								:scrollable="false"
								:list="tabList" 
								@click="dateClick"
								:activeStyle="{color:'var(--theme-color)',fontWeight:'bold'}"
								lineColor="var(--theme-color)">
							</u-tabs>
						 </view>
						 <view class="list grid col-5 margin-top">
						 	<view class="padding-xs" v-for="(item,index) in list" :key="index">
						 		<view class="padding-sm radius-xl text-center" :class="item.status==1?'china-btn-bg':'bg-gray'" @click="toSet(item)">
						 			{{item.time}}
									<template v-if="item.status==1">
										<text class="text-sm">可预约</text>
									</template>
									<template v-if="item.status==2">
										<text class="text-sm">已预约</text>
									</template>	
									<template v-if="item.status==3">
										<text class="text-sm">休息中</text>
									</template>		
						 		</view>
						 	</view>
							
							<emptyData type="notOrder" top="10" v-if="emptyShow" text="暂无可服务时间"></emptyData>
						 </view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			partnerId:{
				type: [Number,String],
				default: 0,
			}
		},
		mounted() {
			let today = new Date();
			let tomorrow = new Date(today);
			tomorrow.setDate(tomorrow.getDate() + 1);
			let afterTomorrow = new Date(today);
			afterTomorrow.setDate(afterTomorrow.getDate() + 2);

			this.tabList.push({ name: '今天', date: this.formatDate(today) });
			this.tabList.push({ name: '明天', date: this.formatDate(tomorrow) });
			this.tabList.push({ name: '后天', date: this.formatDate(afterTomorrow) });
		},
		data() {
			return {
				emptyShow:false,
				tabList:[],
				list:[],
				day:'今天'
			};
		},
		created() {
			this.getServeTime(this.formatDate(new Date()))
		},
		methods:{
			getServeTime(date){
				let self = this;
				this.$api.get({
					url:'partner.ServiceTime/getServiceTime',
					data:{
						partnerId:self.partnerId,
						date:date,
					},
					success:res=>{
						if(res.data.list.length == 0){
							this.emptyShow = true;
						}else{
							this.emptyShow = false;
						}
						self.list = res.data.list;
					}
				})
			},
			dateClick(e){
				this.day = e.name;
				this.getServeTime(e.date)
			},
			toSet(item){
				if(item.status != 1){
					return;
				}
				item.dayType = this.day;
				this.$emit('serviceTimePopup',{type:'confirm',data:item})
			},
			close(){
				this.$emit('serviceTimePopup',{type:'colse',data:0});
			},
			open(){},
			formatDate(date) {
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0');
				let day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="less" scoped>
.tab{
	width: 100%;
}
</style>
